<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令语法</title>
    <script type="application/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
Vue模板语法有以下两大类:
1.插值语法，使用{{}}
    功能:用于解析标签体内容;
    写法:{{xxx}},xxx是js表达式,且可以直接读取到data中所有属性;
2.指令语法，使用v-
    功能:用于解析标签属性(包括:标签属性,标签内容,绑定事件.....);
    举例:v-bind:href="url",其中href是标签属性,url是js表达式,且可以直接读取到data中所有属性,或简写为 :href="url"
-->
<div id="app1">
    <h1>1.差值语法</h1>
    <h2>1.1 指令语法</h2>
    <a v-bind:href="url">百度一下,你就知道{{whole.name}}</a>
    <h2>1.2 指令简写</h2>
    <a :href="url">百度一下,你就知道{{short.name}}</a>

</div>


<script type="application/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    new Vue({
        el: "#app1",
        data: {
            url: "https://www.baidu.com",
            whole: {
                name: '(完整版)'
            },
            short: {
                name: '(简写版)'
            }

        }
    })
</script>
</body>
</html>
